<template>
	<view style="background-color: #4c4c4c;height: 100%;display: flex;flex-direction: column;gap: 10px;"
		:style="{width:sConf.toLeft + 'px'}">
		<view v-if="sConf.maxLeft" style="width: 100%;padding: 5px;">
			<uni-search-bar v-model="searchValue" cancelButton="none" />
		</view>
		<!--
		<scroll-view scroll-y="true" style="height: 500px;color: #f1f1f1;">
			<template v-for="(menu , index) in menusList" :key="'menu'+index">
				
				<view class="menu-title" @click="menu.isOpen = !menu.isOpen">
					<view style="display: flex;align-items: center;gap: 5px;">
						<uni-icons :type="menu.icon" size="24" color="#fff"></uni-icons>
						<text v-if="sConf.maxLeft" style="margin-left: 5px; font-size: small;">{{ menu.title }}</text>
					</view>
					<uni-icons v-if="sConf.maxLeft" type="right" size="12" color="#fff"
						:class="{ 'arrow-down': menu.isOpen }"></uni-icons>
				</view>
				
				<view class="submenu" v-show="sConf.maxLeft && menu.isOpen">
					<view v-for="(sub, subIndex) in menu.children" :key="'sub'+subIndex" class="submenu-item"
						:class="{ 'active': currentMenu === sub.title }" @click="navigate(sub)">
						<text style="font-size: small;">{{ sub.title }}</text>
					</view>
				</view>
			</template>
		</scroll-view>
		-->

		<uni-collapse v-show="sConf.maxLeft" :accordion="true" @change="ChangeMenu" style="background-color: #4c4c4c;">
			<uni-collapse-item v-for="(menu,index) in menusList" :key="'menu'+index" titleBorder="none"
				class="menu-item">
				<template v-slot:title>
					<view style="display: flex;align-items: center;gap: 10px;padding: 15px;">
						<uni-icons :type="menu.icon" size="24" color="#fff"></uni-icons>
						<text style="font-size: small;color: #f1f1f1;">{{ menu.title }}</text>
					</view>
				</template>
				<view class="content" style="padding: 5px 0 5px 25px;background-color: #4c4c4c;">
					
					<view v-for="(sub, subidx) in menu.children" :key="'sub'+subidx" style="padding: 10px;">					
						<text style="font-size: small;color: #f1f1f1;">{{ sub.title }}</text>
					</view>
					
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '左侧边栏',
				sConf: getApp().globalData,
				searchValue: '',
				curMenu: '',
				menusList: [{
						title: '首页',
						icon: 'home',
						isOpen: false,
						path: '/pages/indedx/index'
					},
					{
						title: '商户管理',
						icon: 'shop',
						isOpen: false,
						children: [{
							title: '商户列表',
							path: '/pages/place/sub-place-list.vue',
							component: 'subPlaceList'
						}]
					},
					{
						title: '商品管理',
						icon: 'gift',
						isOpen: false,
						children: [{
							title: '商品SPU',
							path: '/pages/goods/sub-goods-main.vue',
							component: 'subGoodsMainVue'
						}]
					},

					{
						title: '订单管理',
						icon: 'cart',
						isOpen: false,
						children: [{
								title: '订单列表',
								path: '/pages/order/order-main',
								component: 'orderMainVue'
							},
							{
								title: '订单统计',
								path: '/order/statistics'
							}
						]
					},
					{
						title: '用户管理',
						icon: 'staff',
						isOpen: false,
						children: [{
							title: '用户列表',
							path: '/pages/staff/sub-staff-main.vue',
							component: 'subStaffMainVue'
						}, {
							title: '实名认证',
							path: '/pages/staff/sub-staff-name.vue',
							component: 'subStaffNameVue'
						}]
					},
					{
						title: '甄新汇选',
						icon: 'pyq',
						isOpen: false,
						children: [{
							title: '产品列表',
							path: '/pages/chain/chain-main.vue',
							component: 'chainMainVue'
						}, {
							title: '消息通知',
							path: '/pages/chain/sub-chain-msg.vue',
							component: 'subChainMsgVue'
						}]
					},
					{
						title: '财务模块',
						icon: 'wallet',
						isOpen: false,
						children: [{
							title: '用户提现申请',
							path: '/pages/finance/sub-staff-draw.vue',
							component: 'subStaffDrawVue'
						}]
					},
					{
						title: '系统设置',
						icon: 'gear',
						isOpen: false,
						children: [{
							title: '管理员列表',
							path: '/components/sub-admin-list/sub-admin-list',
							component: 'subAdminList'
						}, {
							title: '用户权益配置',
							path: '/pages/conf/cfg-staff-level.vue',
							component: 'cfgStaffLevelVue'
						}, {
							title: '企业微信',
							path: '/pages/qywx/sub-qywx-list.vue',
							component: 'subQywxListVue',

						}]
					}
				]
			}
		},
		mounted() {
			console.log('mounted', this.title);
		},
		methods: {
			ChangeMenu(e) {
				console.log('ChangeMenu', e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu-item {
		&:hover {
			background-color: #263445;
		}
	}

	/*
	.menu-title {
		padding: 12px 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;

		&:hover {
			background-color: #263445;
		}	

		.u-icon {
			margin-right: 10px;
		}

		.arrow-down {
			transform: rotate(90deg);
		}
	}

	.submenu {
		background-color: #1f2d3d;

		.submenu-item {
			padding: 10px 20px 10px 45px;
			cursor: pointer;

			&:hover {
				background-color: #001528;
			}

			&.active {
				background-color: #1890ff;
			}
		}
	}
	*/
</style>